{% extends "director/index.html" %}
{% load static %}
{% load jsonify %}

{% block page_content %}

<script type="text/javascript">
        
        heads={{ heads | jsonify }}
		row = {{ row | jsonify }}
		permits={{permits | jsonify }}
		model_permits = {{ model_permits | jsonify}}
		permit_heads={{permit_heads | jsonify}}
		errors={}
		
        $(function () {
                haha= new Vue({
                        el:'#there',
                        data:{
	                        menu:menu,
                        	permit_heads:permit_heads,
                        	selected_heads:[],
                            permits: permits?permits:{},
                            sld_md_name:'',
                            kw:{
                                heads:heads,
                                row:row,
                                errors:{},
                            }
                        },
                        mounted: function(){
	                        var self=this
	                        this.selected_heads=ex.remove(this.permit_heads,function (head) {
	                        		return self.permits[head.name]
	                        })
                        },
                        methods:{
                                add_permit:function (name) {
	                                if(!name){
		                                return 
	                                }
									var selected_permit=ex.remove(this.permit_heads,function (head) {
										return name==head.name
									})
	                                this.selected_heads=this.selected_heads.concat(selected_permit)
                                },
                                delet_permit:function (name) {
	                                this.permit_heads = this.permit_heads.concat(ex.remove(this.selected_heads,function (head) {
	                                		return head.name==name
	                                }))
                                	Vue.delete(this.permits,name)
                                	
                                },
                                submit:function () {
                                        var self=this;
                                        show_upload()
                                        var post_data=[{fun:'save_group_and_permit',row:this.kw.row,permits:this.permits}]
                                        $.post('/_ajax',JSON.stringify(post_data),function (data) {
											if(data.save_group_and_permit.errors){
													this.kw.errors=data.save_group_and_permit.errors
											}
											if(ex.parseSearch().next){
												location=decodeURIComponent(ex.parseSearch().next)
											}
											hide_upload(300)
                                        })
                                },
                                cancel:function () {
									location=document.referrer
//									var search =ex.parseSearch();
//									if(search.next){
//										location=atob(search.next)
//									}
								}
                        },
                })
        })


</script>
<div id='there'>
	<path-nav :menu='menu'>
		<li><span>编辑</span></li>
	</path-nav>
	
		<div class="btn-group" style='float: right;'>


			<button name="test" type="button" class="btn btn-default" @click='submit()'>Save</button>
       		<button name="test" type="button" class="btn btn-default" @click='cancel()'>Cancel</button>
		</div>
        
        <div style='margin-top:50px;'>
	         <field name='name' :kw='kw'></field>
        </div>
       
        <div>
	        <span style='width:100px;display: inline-block;text-align: right;margin-right:20px;'><b>可用权限:</b></span>
            <select name="" id="available_permit" v-model='sld_md_name' class="form-control">
	            <option value="">---</option>
	            <option v-for='item in permit_heads' :value="item.name" v-text='item.label'></option>
            </select>
            <button name="test" type="button" class='btn btn-default btn-sm' @click='add_permit(sld_md_name)'>添加</button>
        </div>
        
        <div  class='row'>
	        <table class='table'>
	        	<tr :class='["permit-table",{"info":head.type!="model"}]' v-for='(head,index) in selected_heads'>
		        	<td style='width:200px;'>
			        	<span @click='delet_permit(head.name)' class='del_btn'>
				        	<i class="fa fa-trash" aria-hidden="true"></i>
				        </span>
				        
			        	<span v-text='head.label'></span>
			        	
			        </td>
		        	<td >
			        	<model-fields v-if='head.type=="model"' :fields='head.fields' 
			        		v-model='permits[head.name]' :uni_name='index'></model-fields>
			        	<special-fields v-else :fields='head.fields' 
			        		v-model='permits[head.name]' :uni_name='index'></special-fields>
		        	</td>
	        	</tr>
	        </table>

        </div>


</div>

<style type="text/css" media="screen" id="test">
	.row .col{
		display: inline-block;
		margin-left:10px;
	}
	.select_cell label{
		font-weight:normal;
	}
	#available_permit{
		min-width:100px;
		max-width:350px;
		display: inline-block;
	}
	.control-label{
		display: inline-block;
		text-align: right;
		margin-right:20px;
		width:100px;
	}
	.field_input{
		display: inline-block;
	}
	.row{
		margin: 20px 0px 0px 120px;
	}
	td{
		padding: 5px 10px;
	}

	.permit-table:nth-child(2n+1){
		background-color: #FDFDFD;
	}
	.del_btn{
		cursor: pointer;
		color: #FF0000;
	}
</style>

<script type="text/javascript">
	Vue.component('model-fields',{
		template:'#model-fields',
		props:['fields','value','uni_name'],
		data:function () {
			return {
				permit:this.value?this.value:[],
				first_row_mark_all:false,
				second_row_mark_all:false,
			}
		},
		watch:{
			permit:function (v) {
				this.$emit('input',v)
			},
			first_row_mark_all:function (v) {
				ex.remove(this.permit,function (item) {
					return item.endsWith('__read') || ex.isin(item,['can__create','can__log'])
				})
				if(v){
					this.permit= this.permit.concat(['can__create','can__log'])
					this.permit=this.permit.concat(ex.map(this.fields,function (field) {
							return field.name+'__read'
					}))
				}
			},
			second_row_mark_all:function (v) {
				ex.remove(this.permit,function (item) {
					return item.endsWith('__write') || ex.isin(item,['can__delete'])
				})
				if(v){
					this.permit=this.permit.concat(['can__delete'])
					this.permit=this.permit.concat(ex.map(this.fields,function (field) {
							return field.name+'__write'
					}))
				}
			},
		},
	})
</script>

<template id='model-fields'>
	<table >
    	<tr class='select_cell'>
        	<td><span >快捷</span></td>
        	<td><span >整表</span></td>
        	<td><span>查看日志</span></td>
        	<td v-for='field in fields'><span v-text='field.label'></span></td>
    	</tr>
    	<tr class='select_cell'>
        	<td><input type="checkbox" name="test" value="" v-model='first_row_mark_all' /></td>
        	<td><input type="checkbox" :id="uni_name+'can__create'" value="can__create" v-model='permit'/>
				<label :for="uni_name+'can__create'">创建</label>
				</td>
			<td><input type="checkbox" :id="uni_name+'can__log'" value="can__log" v-model='permit'/>
				<label :for="uni_name+'can__log'">允许</label>
				</td>
			<td v-for='field in fields'><input type="checkbox" :id="uni_name+field.name+'__read'" 
					:value="field.name+'__read'" v-model="permit" />
				<label :for="uni_name+field.name+'__read'">读</label>
				</td>
    	</tr>
    	<tr class='select_cell'>
        	<td><input type="checkbox" value='' v-model='second_row_mark_all'></td>
        	<td><input type="checkbox" :id="uni_name+'can__delete'"  value='can__delete' v-model='permit'>
		       <label :for="uni_name+'.can__delete'">删除</label>
		       </td>
		    <td></td>
		    <td v-for='field in fields'><input type="checkbox" :id="uni_name+field.name+'__write'" 
	           	:value="field.name+'__write'" v-model="permit">
	           	<label :for="uni_name+field.name+'__write'">写</label>
	           	</td>
    	</tr>
    </table> 
</template>

<script type="text/javascript">
	Vue.component('special-fields',{
		template:'#special-fields',
		props:['fields','value','uni_name'],
		data:function () {
			return {
				permit:this.value?this.value:[],
				
			}
		},
		watch:{
			permit:function (v) {
				this.$emit('input',v)
			},
			
		}
	})
</script>
<template id='special-fields'>
	<table>
		<tr>
			<td v-for='field in fields'><input type="checkbox" :id="uni_name+field.name" 
				:value="field.name" v-model="permit" />
			<label :for="uni_name+field.name" v-text='field.label'></label>
			</td>
		</tr>
	</table>
</template>

<!--<script>-->
	<!--Vue.component('group-field',{-->
		<!--template:'#group-filed',-->
		<!--props:['options'],-->
		<!--data:function(){-->
			<!--return {-->
				<!--selected_group:[]-->
			<!--}-->
		<!--}-->
	<!--})-->
<!--</script>-->
<!--<template id="group-field">-->
	<!--<tow-col-sel v-model="selected_group" :choices='head.options'>-->

	<!--</tow-col-sel>-->
<!--</template>-->
<script type="text/javascript">
        Vue.component('pure_form',{
                template:'#pure_form',
                props:['kw'],
                methods:{
                        submit:function () {
                                var self =this;
                                show_upload()
                                var post_data=[{fun:'save',row:this.kw.row}]
                                $.post('',JSON.stringify(post_data),function (data) {
                                        if(data.save.errors){
                                                self.kw.errors = data.save.errors
                                                hide_upload()
                                        }else{
                                                self.$dispatch('submit-success')
                                                setTimeout(function () {
                                                        hide_upload()
                                                }, 2000);
                                        }
                                        
                                })
                        }
                },
                events:{
                        'submit':function () {
                                this.submit()
                        }
                }
        })
</script>
<template id='pure_form'>
        <div>
                <field  v-for='head in kw.heads' :name='head.name' :kw='kw'></field>
        </div>
</template>
{% endblock %}